import React, {useReducer} from 'react'
import SearchForm from '@/components/SearchForm'
import {Button, Card, Form, Input, Select, Table} from 'antd'
import useRefHeight from "@/hooks/useRefHeight.ts";
import useScrollHeight from "@/hooks/useScrollHeight.ts";
import RegionCascader from "@/components/RegionCascader";
import useRegions from "@/hooks/useRegions.ts";
import useSearchTable from "@/hooks/useSearchTable.ts";
import {EmergencyPlanMap} from "@/enums/emergency/map";
import {getEmergencyPlanPage} from "@/services/emergency";
import {PlusOutlined} from '@ant-design/icons';
import EditPlanModal from "@/pages/emergency/plan/EditPlanModal";
import PlanTaskModal from "@/pages/emergency/plan/PlanTaskModal";
import CommandGroupModal from "@/pages/emergency/plan/CommandGroup";


const {useForm} = Form
const EmergencyPlan: React.FC = () => {
  const [form] = useForm()
  const [regions] = useRegions();
  const [addPlanData, dispatchAddPlan] = useReducer(
    (state: any, {clear, ...action}: any) => {
      return clear ? {
        title: '新增预案',
        ...action
      } : {
        ...state,
        ...action
      }
    },
    {
      title: '新增预案',
      open: false,
    }
  )
  const [planTask, dispatchPlanTask] = useReducer(
    (state: any, {clear, ...action}: any) => {
      return clear ? {
        title: '预案任务',
        ...action
      } : {
        ...state,
        ...action
      }
    },
    {
      title: '预案任务',
      open: false,
    }
  )
  const [commandGroup, dispatchCommandGroup] = useReducer(
    (state: any, {clear, ...action}: any) => {
      return clear ? {
        title: '指挥小组',
        ...action
      } : {
        ...state,
        ...action
      }
    },
    {
      title: '指挥小组',
      open: false,
    }
  )
  const {
    search,
    refresh,
    getOrder,
    tableProps
  } = useSearchTable((params: any) => {
    return getEmergencyPlanPage(params)
  }, form)

  const columns: any = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 100,
      render: (_: any, __: any, index: number) => getOrder(index)
    },
    {
      title: '预案名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '预案类型',
      dataIndex: 'type',
      key: 'type',
      render(value: any) {
        return EmergencyPlanMap.getName(value);
      },
    },
    {
      title: '主编单位',
      dataIndex: 'editDept',
      key: 'editDept',
    },
    {
      title: '生效日期',
      dataIndex: 'validateTime',
      key: 'validateTime',
    },
    {
      title: '行政区划',
      dataIndex: 'zoneCodeName',
      key: 'zoneCodeName',
      render(text: any) {
        return text || '-';
      },
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      width: 260,
      render(id: any) {
        return (
          <div>
            <Button
              type='link'
              style={{paddingLeft: 0}}
              onClick={() => {
                dispatchAddPlan({
                  title: '修改预案',
                  planId: id,
                  open: true,
                });
              }}
            >修改</Button>
            <Button
              type='link'
              style={{paddingLeft: 0}}
              onClick={() => {
                dispatchPlanTask({
                  planId: id,
                  open: true,
                });
              }}
            >预案任务</Button>
            <Button type='link' style={{paddingLeft: 0}}
                    onClick={() => {
                      dispatchCommandGroup({
                        planId: id,
                        open: true,
                      });
                    }}
            >指挥小组</Button>
            {/*<TextButton*/}
            {/*  onClick={() => {*/}
            {/*    openEditPlanData(id);*/}
            {/*  }}*/}
            {/*>*/}
            {/*  修改*/}
            {/*</TextButton>*/}
            {/*<TextButton*/}
            {/*  onClick={() => {*/}
            {/*    openTaskList(id);*/}
            {/*  }}*/}
            {/*>*/}
            {/*  预案任务*/}
            {/*</TextButton>*/}
            {/*<TextButton*/}
            {/*  onClick={() => {*/}
            {/*    openCommandGroup(id);*/}
            {/*  }}*/}
            {/*>*/}
            {/*  指挥小组*/}
            {/*</TextButton>*/}
            {/*<Popconfirm*/}
            {/*  title="确定要删除该预案吗？"*/}
            {/*  okText="确定"*/}
            {/*  cancelText="取消"*/}
            {/*  overlayStyle={{ width: '200px' }}*/}
            {/*  onConfirm={() => {*/}
            {/*    doDelete(id);*/}
            {/*  }}*/}
            {/*>*/}
            {/*  <TextButton>删除</TextButton>*/}
            {/*</Popconfirm>*/}
          </div>
        );
      },
    },
  ]

  // 动态计算表格高度
  const [searchFormRef, searchFormHeight, refreshHeight] = useRefHeight();
  const [toolbarRef, toolbarHeight] = useRefHeight();
  const scrollHeight = useScrollHeight({
    pagination: true,
    tableHead: true,
    deps: [searchFormHeight, toolbarHeight]
  });
  return (
    <div>
      <div className="pb-[12px]" ref={searchFormRef}>
        <Card>
          <SearchForm form={form} onReset={search} onFinish={search} onResize={() => refreshHeight()}>
            <Form.Item name="name" label="预案名称">
              <Input/>
            </Form.Item>
            <Form.Item name="type" label="预案类型">
              <Select
                placeholder="预案类型"
                options={EmergencyPlanMap.toOption()}
                allowClear
              />
            </Form.Item>
            <Form.Item name="editDept" label="主编单位">
              <Input/>
            </Form.Item>
            <Form.Item label='行政区划' name='area'>
              <RegionCascader placeholder="请选择行政区划" options={regions} onChange={search}/>
            </Form.Item>
          </SearchForm>
        </Card>
      </div>
      <Card>
        <div className="pb-[8px]" ref={toolbarRef}>
          <Button
            type="primary"
            icon={<PlusOutlined/>}
            onClick={() => {
              dispatchAddPlan({
                title: '新增预案',
                open: true,
              })
            }}
          >
            新增
          </Button>
        </div>
        <Table
          columns={columns}
          rowKey="id"
          scroll={{y: scrollHeight}}
          {...tableProps}
        />
      </Card>
      <EditPlanModal
        {...addPlanData}
        dispatch={dispatchAddPlan}
        bodyStyle={{height: '600px', overflowY: 'auto'}}
        onSuccess={() => {
          refresh()
        }}
        width={1000}
      />
      <PlanTaskModal
        {...planTask}
        dispatch={dispatchPlanTask}
        bodyStyle={{height: '600px', overflowY: 'auto'}}
        onSuccess={() => {
          refresh()
        }}
        width={1000}
      />
      <CommandGroupModal
        {...commandGroup}
        dispatch={dispatchCommandGroup}
        bodyStyle={{height: '600px', overflowY: 'auto'}}
        onSuccess={() => {
          refresh()
        }}
        width={1000}
      />

    </div>
  )
}

export default EmergencyPlan
